<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>list</title>
    <script src="jquery.js"></script>
</head>
<body class="container">
<div class="with:80%">
    <table class="table-hover">
       <thead>
        <tr>
            <th class="col-sm-2 control-label">
                <a href="add" th:href="@{/add}" class="btn btn-info">新增</a>
            </th>
        </tr>
        </thead>
        <thead>
        <tr>
            <th>序号</th>
			 <th>围栏id</th>
			 <th>围栏类型</th>
			 <th>创建时间</th>
			 <th>有效时间</th>
             <th>修改</th>
             <th>删除</th>
        </tr>
        </thead>
        <tbody>
           <!--  <tr th:each="tra : ${maplist}">
	            <td th:text="${tra.id}"></td>
	            <td th:text="${tra.mapGid}"></td>
	            <td th:text="多边形"></td>
	            <td th:text="${tra.createTime}"></td>
	            <td th:text="3天"></td>
	            <td><a th:href="@{/toEdit(id=${tra.id})}">修改</a></td>
	            <td><a th:href="@{/delete(id=${tra.id})}">删除</a></td>
	        </tr> -->
	        <tr class="tr_node" >
                    <!--动态载入数据-->
             </tr>
        </tbody>
    </table>
</div>
<script type="text/javascript">
	window.onload = function () {
		 
	    $.ajax({
	 
	        type: 'post',
	        url: "/getList",
	        contentType: "application/json;cherset=utf-8",
	        dataType: "json",
	        success: function (data){
	                //取出后端传过来的list值
	                var chargeRuleLogs = data.data;
	                //对list值进行便利
		    		$.each(chargeRuleLogs, function (index, n) {
		          	var rowTr = document.createElement('tr')
		          	//找到html的tr节点
		         	 rowTr.className = "tr_node"
		               var child = "<td>" + chargeRuleLogs[index].id +  "</td>"
		               + "<td>" + chargeRuleLogs[index].mapGid + "</td>"
		               + "<td>" + chargeRuleLogs[index].mapType + "</td>"
		               + "<td>"+new Date(parseInt(chargeRuleLogs[index].createTime)).toLocaleString().replace(/:\d{1,2}$/,' ') + "</td>"
		               + "<td>"+ new Date(parseInt(chargeRuleLogs[index].validTime)).toLocaleString().substr(0,17) + "</td>"
		               + "<td><button><a href='/goEdit?id="+chargeRuleLogs[index].id+"'>修改</a></button></td>"
		             /*   + "<td><button onclick='goEdit("+chargeRuleLogs[index].id);'>修改</button></td>" */
		               + "<td><button><a href='/delGeofence?id="+chargeRuleLogs[index].id+"'>删除</a></button></td>"
		               + "<td><button><a href='/goOnGeofence?id="+chargeRuleLogs[index].id+"'>启用</a></button></td>"
		               + "<td><button><a href='/isGeofence?id="+chargeRuleLogs[index].id+"'>判断是否存围栏内</a></button></td>"
		                //将要展示的信息写入页面
		                rowTr.innerHTML = child;
		                //将信息追加
		                $(".table-hover").append(rowTr);
		                });
		            }        
	    });
	}
	//编辑
	function goEdit(id){
		
		window.location.href='/goEdit?id='+id;
		
		
	}
	//删除
	function goDel(id){
		
	}
	
</script>
</body>
</html>